<!--
 * @Author: MarsLay
 * @Date: 2021-12-23 09:39:56
 * @LastEditTime: 2022-11-18 13:27:16
 * @LastEditors: MarsLay 331412466@qq.com
 * @Description: 进度组件，支持多层级，根据step判断是否激活当前层级,0未激活,1激活
 * @FilePath: \basic-module\components\process\process.vue
-->
<template>
  <view class="process">
    <view class="inner">
      <view class="label">{{ title }}</view>
      <view @click="open(item, index)" class="process-single" v-for="(item, index) in list" :key="index">
        <view class="process-container">
          <view class="process-line"
            :class="{ 'process-line-passive': index == 0, 'process-line-active': list[index - 1] && list[index - 1].step == 1 && index != 0 }">
          </view>
          <view class="process-point">
            <image mode="aspectFit" :src="item.path"></image>
          </view>
          <view class="process-line"
            :class="{ 'process-line-passive': index == list.length - 1, 'process-line-active': item.step == 1 && index != list.length - 1 }">
          </view>
        </view>
        <view class="process-detail">
          <avatar shape="circle" :username="item.username" :src="item.img" :size="35"></avatar>
          <view class="detail-info">
            <view class="info-name">
              <view class="username">{{ item.name }}</view>
              <view class="conn">·</view>
              <view class="status-txt" :style="{ color: item.color }">{{ item.stat }}</view>
            </view>
            <view class="time">{{ item.dateline }}</view>
            <view class="reason" v-if="item.reasonShow">处理意见：{{ item.acc_reason }}</view>
          </view>
          <image v-if="item.acc_reason" class="arrow-right-icon" :class="{ 'arrow-rotate': item.reasonShow }"
            mode="aspectFit" src="../../static/img/icon/arrow-right.png"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import avatar from "@/components/avatar/avatar";

export default {
  name: "process",
  components: { avatar },
  props: {
    title: {
      type: String,
      default: "审核进度",
    },
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      current: this.list
    };
  },
  computed: {},
  watch: {},
  onLoad(d) { },
  onShow() { },
  methods: {
    open(v, i) {
      if (v.acc_reason == "") return;
      v.reasonShow = !v.reasonShow;
      this.$set(this.list, i, v);
    },
  },
};
</script>
<style lang='less' scoped>
.process {
  background: #ffffff;

  .inner {
    padding: 30upx 50upx;
  }

  .label {
    margin-bottom: 20upx;
    color: #888990;
  }
}

.process-container {
  .flex(column);
}

.process-point {
  width: 35upx;
  height: 35upx;
}

.process-line {
  flex: 1;
  width: 5upx;
  background-color: #e7e7e7;
}

.process-line.process-line-passive {
  background-color: transparent;
}

.process-line.process-line-active {
  background-color: #0bd5e7;
}

.process-single {
  display: flex;
}

.process-detail {
  .flex();
  padding: 20upx 0 20upx 30upx;
  width: calc(100% - 35upx);

  .detail-info {
    padding-left: 15upx;
    width: calc(100% - 70upx);
  }

  .info-name {
    .flex(row, flex-start);
    margin-bottom: 5upx;
    font-size: 26upx;
    color: #1d256e;
  }

  .time {
    font-size: 24upx;
    color: #888990;
  }

  .conn {
    padding: 0 5upx;
  }
}

.arrow-rotate {
  transform: rotate(90deg);
}

.reason {
  font-size: 26upx;
  color: #888990;
  word-wrap: break-word;
  word-break: break-all;
}
</style>